<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-1">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>

        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
         <input type="button" @click="changeType" value="Toggle Login Type" />

    </div>
    <script>
        var app1 = new Vue({
            el: '#app-1',
            data: {
                loginType: 'username'
            },
            methods: {
                changeType: function () {
                    this.loginType = this.loginType === 'username' ? 'email' : 'username';
                }
            }
        });
    </script>
</body>


</html>